import React from 'react';
import './ShowVue2React.scss'
import {DrawBox} from "../Draws/DrawClass/DrawBox";
import {DrawImage} from "../Draws/DrawClass/DrawImage";
import DrawArrow from "../Draws/DrawClass/DrawArrow";
import DrawError from "../Draws/DrawClass/DrawError";
import DrawOk from "../Draws/DrawClass/DrawOk";
import gsap from "gsap";
import MotionPathPlugin from 'gsap/MotionPathPlugin';
import DrawFont from "../Draws/DrawClass/DrawFont";
gsap.registerPlugin(MotionPathPlugin);

interface AllDraw {
    box: DrawBox,
    vue: DrawImage,
    ie: DrawImage,
    react: DrawImage,
    arrow1: DrawArrow
    error1: DrawError
    ok1: DrawOk
    font: DrawFont
}
const drawObject: Partial<AllDraw> = {};

function initDraw(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
    drawObject.box = new DrawBox(
        ctx,
        {width: 150, height: 150}
    );
    drawObject.vue = new DrawImage(
        ctx,
        require('../../../../assets/img/vue.png'),
        {width: 59, height: 50}
    );
    drawObject.ie = new DrawImage(
        ctx,
        require('../../../../assets/img/ie.png'),
        {width: 54, height: 50}
    );
    drawObject.react = new DrawImage(
        ctx,
        require('../../../../assets/img/react.png'),
        {width: 57, height: 50}
    );
    drawObject.arrow1 = new DrawArrow(
        ctx,
        {width: 100, height: 20}
    )
    drawObject.error1 = new DrawError(
        ctx
    )
    drawObject.ok1 = new DrawOk(
        ctx
    )
    drawObject.font = new DrawFont(
        ctx,
        ''
    )
    createAnimation(drawObject, ctx, canvas)

    initTimeLine()
}

function initTimeLine() {
    drawObject.font?.setPosition({x: 10, y: 130})
    drawObject.vue?.setPosition({x: 0, y: 50});
    drawObject.vue?.show()

    setTimeout(() => {
        drawObject.ie?.setPosition({x: 200, y: 50});
        drawObject.ie?.show()
    }, 400)

    setTimeout(() => {
        drawObject.arrow1?.setPosition({x: 83, y: 65});
        drawObject.arrow1?.show()
        drawObject.font?.changeFont('当vue运行在ie8中时')
        drawObject.font?.show()
    }, 1000)


    setTimeout(() => {
        drawObject.error1?.setPosition({x: 100, y: 50});
        drawObject.error1?.show()
    }, 2100)

    setTimeout(() => {
        drawObject.arrow1?.hide();
        drawObject.error1?.hide();
        drawObject.ie?.setPosition({x: 350, y: 50});
        drawObject.font?.hide()
    }, 3800)

    setTimeout(() => {
        drawObject.box?.setPosition({x: 140, y: 50});
        drawObject.box?.show();
        drawObject.font?.setPosition({x: 85, y: 140})
        drawObject.font?.changeFont('尝试进行兼容')
        drawObject.font?.show()
    }, 4800)

    setTimeout(() => {
        drawObject.font?.hide()
    }, 6500)


    setTimeout(() => {
        drawObject.box?.setSize({width: 100, height: 100});
        drawObject.box?.setPosition({x: 115, y: 25});

        drawObject.react?.setPosition({x: 250, y: 50});
        drawObject.react?.show()

        drawObject.font?.setPosition({x: 20, y: 140})
        drawObject.font?.changeFont('参考其他框架可以支持ie8')
        drawObject.font?.show()
    }, 8000)

    setTimeout(() => {
        drawObject.vue?.setSize({width: 30, height: 30});
        drawObject.vue?.setPosition({x: 10, y: 60});

        drawObject.react?.setSize({width: 30, height: 30});
        drawObject.react?.setPosition({x: 260, y: 60});
    }, 9000)

    setTimeout(() => {
        drawObject.vue && gsap.to(drawObject.vue.drawStyle.position, {
            duration: 0.7,
            motionPath: {
                path: [
                    {x:10, y:60},
                    {x:115, y:20},
                    {x:145, y:80}
                ],
                curviness: 2,
                autoRotate: true
            },
            ease: "power3.out",
        })
    }, 9500)

    setTimeout(() => {
        drawObject.react && gsap.to(drawObject.react.drawStyle.position, {
            duration: 0.7,
            motionPath: {
                path: [
                    {x:260, y:60},
                    {x:195, y:20},
                    {x:145, y:80}
                ],
                curviness: 2,
                autoRotate: true
            },
            ease: "power3.out",
        })
        drawObject.vue?.hide()
    }, 10200)

    setTimeout(() => {
        drawObject.react?.hide()
        drawObject.box?.closeBox()
        drawObject.box?.setPosition({x: 115, y: 0})
        drawObject.arrow1?.setPosition({x: 125, y: 65});
        drawObject.font?.hide()
    }, 10900)

    setTimeout(() => {
        drawObject.box?.setPosition({x: 0, y: 0})
        drawObject.arrow1?.show()
        drawObject.font?.changeFont('再次尝试运行在ie8')
        drawObject.font?.show()
    }, 11600)

    setTimeout(() => {
        drawObject.ie?.setPosition({x: 250, y: 50})
    }, 11800)

    setTimeout(() => {
        drawObject.ok1?.setPosition({x: 150, y: 50});
        drawObject.ok1?.show()
    }, 13000)
}

function createAnimation(drawObject: Partial<AllDraw>, ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
    const animate = () => {
        clearDraw(ctx, canvas);
        Object.values(drawObject).forEach(drawItem => {
            drawItem.draw();
        })
        requestAnimationFrame(animate);
    };
    animate();
}

function clearDraw(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
}

const Loading: React.FC<{}> = (props) => {
    const canvasRef = React.createRef<HTMLCanvasElement>();
    React.useEffect(() => {
        const ctx = canvasRef.current?.getContext('2d')
        initDraw(ctx as CanvasRenderingContext2D, canvasRef.current as HTMLCanvasElement)
        return function cleanup() {
            console.log('组件被卸载componentWillUnmount');
        };
    }, []);
    return (
        <div>
            <canvas width={500} height={500} ref={canvasRef}></canvas>
        </div>
    );
};

export default Loading;
